<!--
 * @Author: zhoujieyu zhoujieyu_web@163.com
 * @Date: 2024-10-08 09:24:09
 * @LastEditors: zhoujieyu zhoujieyu_web@163.com
 * @LastEditTime: 2024-10-09 17:04:15
 * @FilePath: \Code\src\components\FloatButton\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="float_list">
    <div v-for="(item, i) in props.btn_data" :key="item.id">
      <div @click="click(item)" :class="activeIndex === i && isClick ? 'btn active' : 'btn'">
        <div class="text">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, PropType } from 'vue'

const isClick = ref(false)

interface btn {
  name: string
  id: number
  init?(): void
  exit?(): void
}

const props = defineProps({
  btn_data: {
    type: Array as PropType<Array<btn>>,
    required: true
  }
})

let activeIndex = ref(0)

const emit = defineEmits(['change'])
const lastClick = ref(-1)

const click = async (item: any) => {
  activeIndex.value = item.id

  if (lastClick.value !== -1) {
    const lastItem = props.btn_data.find(item => item.id === lastClick.value)
    lastItem.exit && (await lastItem.exit())
  }

  if (lastClick.value !== item.id) {
    lastClick.value = item.id
    isClick.value = true
    item.init && (await item.init())
  } else {
    isClick.value = false
    lastClick.value = -1
  }

  emit('change', { id: activeIndex.value, name: item.name, active: isClick.value, lastClick: lastClick.value })
}
</script>

<style lang="scss" scoped>
.float_list {
  z-index: 99;
  display: flex;
  justify-content: space-around;
  position: fixed;
  flex-direction: column;
  @include Width(200);
  @include Top(135);
  @include Left(505);

  .btn {
    @include Width(130);
    @include hHeight(40);
    margin-bottom: 10px;
    background: url('./normal.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    .text {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      @include FontSize(16);
      color: #fff;
      font-family: Tencent;
      @include PaddingBottom(3);
    }
  }
  & .active {
    background: url('./active.png') no-repeat;
    background-size: 100% 100% !important;
  }
}
</style>
